<template>
  <u-popup v-model="show" mode="center" :border-radius="20" width="600rpx">
    <view class="wechat-login-modal">
      <view class="modal-header">
        <text class="title">微信登录</text>
        <u-icon name="close" size="20" @click="close" />
      </view>

      <view class="modal-content">
        <view class="phone-input-section">
          <text class="label">请输入您的手机号</text>
          <u-input
            v-model="phone"
            placeholder="请输入手机号"
            :border="false"
            class="phone-input"
            maxlength="11"
            type="number"
          />
        </view>

        <!-- 微信小程序环境下的手机号快速验证 -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="quick-verify-section" v-if="showQuickVerify">
          <text class="quick-verify-tip">或使用微信快速验证</text>
          <button
            class="quick-verify-btn"
            open-type="getPhoneNumber"
            @getphonenumber="handleGetPhoneNumber"
          >
            微信快速验证手机号
          </button>
        </view>
        <!-- #endif -->
      </view>

      <view class="modal-footer">
        <u-button
          type="primary"
          :loading="loading"
          @click="handleConfirm"
          class="confirm-btn"
        >
          确认登录
        </u-button>
        <u-button
          type="default"
          @click="close"
          class="cancel-btn"
        >
          取消
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { wechatLogin as wechatLoginApi } from '@/Api/load/load'
import { WechatLoginUtils, PhoneUtils } from '@/utils/wechat'

interface Props {
  modelValue: boolean
  wechatCode: string
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success', data: any): void
  (e: 'error', error: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const show = ref(false)
const phone = ref('')
const loading = ref(false)
const showQuickVerify = ref(true)

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  show.value = newVal
  if (newVal) {
    phone.value = ''
  }
})

// 监听 show 变化
watch(show, (newVal) => {
  emit('update:modelValue', newVal)
})

const close = () => {
  show.value = false
}

// 处理微信手机号快速验证
const handleGetPhoneNumber = async (e: any) => {
  try {
    const result = await WechatLoginUtils.handlePhoneNumberCallback(e)
    if (result) {
      phone.value = result
      showQuickVerify.value = false
    }
  } catch (error) {
    emit('error', (error as Error).message)
  }
}

// 确认登录
const handleConfirm = async () => {
  if (!phone.value.trim()) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }

  if (!PhoneUtils.validatePhone(phone.value)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    })
    return
  }

  loading.value = true

  try {
    const response = await wechatLoginApi({
      phone: phone.value,
      code: props.wechatCode
    })

    emit('success', response.data)
    close()
  } catch (error) {
    emit('error', (error as Error).message || '微信登录失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.wechat-login-modal {
  padding: 40rpx;
  background: white;
  border-radius: 20rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;

  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.modal-content {
  margin-bottom: 40rpx;
}

.phone-input-section {
  margin-bottom: 30rpx;

  .label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .phone-input {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 0 20rpx;
  }
}

.quick-verify-section {
  text-align: center;

  .quick-verify-tip {
    display: block;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
  }

  .quick-verify-btn {
    background: #07c160;
    color: white;
    border: none;
    border-radius: 12rpx;
    padding: 20rpx 40rpx;
    font-size: 28rpx;
  }
}

.modal-footer {
  display: flex;
  gap: 20rpx;

  .confirm-btn {
    flex: 1;
  }

  .cancel-btn {
    flex: 1;
  }
}
</style>
